<template>
    <div>
        <div class="chunk" v-if="notEmpty(infoData)">
            <div class="title">发票信息</div>
            <div class="container_detail">
                <div
                    class="container_invoice"
                    v-for="item in infoData"
                    :key="item.invoiceId"
                >
                    <div class="preview">
                        <div class="container_preview">
                            <div class="image">
                                <!-- <ImagePreview -->
                                <!-- :src="'http://139.159.183.71:12081/jms/2023/12/21/7fe708060e5d4d47a996e38c9e4dac80.png'" -->
                                <!-- width="100%" -->
                                <!-- height="100%" -->
                                <!-- ></ImagePreview> -->
                            </div>
                            <div class="handleBtn">
                                <el-button
                                    type="text"
                                    @click="
                                        _previewImages([
                                            'http://139.159.183.71:12081/jms/2023/12/21/7fe708060e5d4d47a996e38c9e4dac80.png',
                                        ])
                                    "
                                    >预览</el-button
                                >
                                <el-button type="text">下载</el-button>
                            </div>
                        </div>
                    </div>
                    <div class="container_content">
                        <div class="item">
                            <div class="label">发票类型：</div>
                            <div class="content">
                                {{ item.invoiceType }}
                            </div>
                        </div>
                        <div class="item">
                            <div class="label">客户编码：</div>
                            <div class="content">
                                {{ item.customerCode }}
                            </div>
                        </div>
                        <div class="item">
                            <div class="label">客户名称：</div>
                            <div class="content">
                                {{ item.customerName }}
                            </div>
                        </div>
                        <div class="item">
                            <div class="label">纳税人识别号：</div>
                            <div class="content">{{ item.taxpayerId }}</div>
                        </div>
                        <div class="item">
                            <div class="label">客户地址：</div>
                            <div class="content">
                                {{ item.customerAddr }}
                            </div>
                        </div>
                        <div class="item">
                            <div class="label">客户银行账号：</div>
                            <div class="content">
                                {{ item.customerBankAccount }}
                            </div>
                        </div>
                        <div class="item">
                            <div class="label">开票金额：</div>
                            <div class="content">
                                {{ item.invoiceAmount }}
                            </div>
                        </div>
                        <div class="item">
                            <div class="label">税额：</div>
                            <div class="content">{{ item.taxAmount }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import FormItems from "@/views/finance/manage/formItems/index.vue";
export default {
    name: "",
    components: { FormItems },
    mixins: [],
    props: {
        value: {
            type: Array,
            required: true,
        },
        state: {
            required: false,
        },
    },

    data() {
        return {};
    },
    computed: {
        infoData: {
            get() {
                return this.useVModel.call(this);
            },
            set(val) {
                this.$emit("input", val);
            },
        },
    },
    watch: {},
    mounted() {},
    methods: {},
};
</script>
<style lang="scss" scoped>
.chunk {
    overflow: hidden;
    background-color: #fff;
    border-radius: 4px;
    padding: 15px 20px;
    margin: 20px;
    box-sizing: border-box;
    .title {
        border-bottom: 1px solid #e9e9e9;
        padding-bottom: 15px;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 16px;
        color: #333333;
        line-height: 22px;
        text-align: left;
        font-style: normal;
    }

    .container_invoice {
        display: flex;
        margin-bottom: 15px;
        .preview {
            flex: 1;
            // width: 300px;
            display: flex;
            flex-direction: column;
            align-items: center;
            .container_preview {
                padding: 25px 0;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                // margin-top: 25px;
                width: 180px;
                .image {
                    aspect-ratio: 16/9;
                }
                .handleBtn {
                    display: flex;
                    justify-content: space-around;
                }
            }
        }
    }
}
.empty {
    font-size: 14px;
    text-align: center;
    padding: 20px;
}
.container_invoice {
    margin: 20px 0;
    display: grid;
    grid-template-columns: 1fr 2fr;
    border: 4px;
    .container_content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        .item {
            display: flex;
            .label {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #8c8c8c;
                line-height: 20px;
                text-align: left;
                font-style: normal;
                width: 100px;
            }
            .content {
                flex: 1;
                min-width: 0;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 14px;
                color: #333333;
                line-height: 20px;
                text-align: left;
                font-style: normal;
            }
        }
    }
}
</style>
